{% extends "trees/base.html" %}
{% block title %}{{ tree.tag_code }} - JM3{% endblock %}
{% block extra_head %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<style>#minimap { height: 200px; border-radius: 8px; }</style>
{% endblock %}
{% block content %}
<div class="d-flex justify-content-between align-items-start flex-wrap">
  <div>
    <h2 class="mb-0">{{ tree.display_name }}</h2>
    <p class="text-muted mb-0">🌳 {{ tree.species.common_name }}{% if tree.location_alias %} · 📍 {{ tree.location_alias }}{% endif %}</p>
    <p class="text-muted small mb-0">ID: {{ tree.tag_code }}</p>
  </div>
  <span class="badge badge-{{ tree.verification_status }} fs-6 text-capitalize">{{ tree.get_verification_status_display }}</span>
</div>

{% if tree.verification_notes %}
<div class="alert alert-warning py-2">⚠️ Verification flag: {{ tree.verification_notes }}</div>
{% endif %}

<div class="row g-3 mb-3">
  <div class="col-md-5">
    {% if tree.photo %}
      <img src="{{ tree.photo.url }}" class="img-fluid rounded shadow-sm mb-2" alt="Tree photo">
    {% else %}
      <div class="bg-light border rounded text-center text-muted py-5 mb-2">No photo &mdash; status Pending</div>
    {% endif %}
    <div id="minimap"></div>
  </div>
  <div class="col-md-7">
    <ul class="list-group">
      <li class="list-group-item d-flex justify-content-between"><span>Organization</span><strong>{{ tree.organization.name }}</strong></li>
      <li class="list-group-item d-flex justify-content-between"><span>Nursery</span><strong>{{ tree.source_nursery.display_name|default:"—" }}</strong></li>
      <li class="list-group-item d-flex justify-content-between"><span>County</span><strong>{{ tree.county|default:"—" }}</strong></li>
      <li class="list-group-item d-flex justify-content-between"><span>GPS</span><strong>{{ tree.latitude }}, {{ tree.longitude }}</strong></li>
      <li class="list-group-item d-flex justify-content-between"><span>Planted</span><strong>{{ tree.planted_date }}</strong></li>
      <li class="list-group-item d-flex justify-content-between"><span>Planter</span><strong>{{ tree.registered_by.username|default:"—" }}</strong></li>
      <li class="list-group-item d-flex justify-content-between"><span>Current status</span><strong class="health-{{ tree.health_status }}">{{ tree.get_health_status_display }}</strong></li>
    </ul>
    <div class="row g-2 mt-2">
      <div class="col-6"><a href="{% url 'monitor_tree' tree.pk %}" class="btn btn-jm3 w-100 btn-lg">Monitor</a></div>
      <div class="col-6"><a href="{% url 'record_activity' tree.pk %}" class="btn btn-outline-success w-100 btn-lg">+ Activity</a></div>
    </div>
  </div>
</div>

<h4>Activity Timeline</h4>
<ul class="list-group mb-4">
  {% for item in timeline %}
  <li class="list-group-item d-flex justify-content-between">
    <span>{{ item.icon }} <span class="badge bg-secondary">{{ item.when|date:"M j, Y" }}</span>
      {{ item.title }}{% if item.detail %} &middot; {{ item.detail }}{% endif %}</span>
    {% if item.photo %}<a href="{{ item.photo }}" target="_blank">photo</a>{% endif %}
  </li>
  {% empty %}
  <li class="list-group-item text-muted">No activity yet.</li>
  {% endfor %}
</ul>
{% endblock %}
{% block extra_js %}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
  const m = L.map('minimap').setView([{{ tree.latitude }}, {{ tree.longitude }}], 15);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {attribution:'&copy; OpenStreetMap'}).addTo(m);
  L.marker([{{ tree.latitude }}, {{ tree.longitude }}]).addTo(m);
</script>
{% endblock %}